ASP.NET Core Blazor WebAssembly を AWS Amplify Hosting を使ってホスティングする

いわさです。

この記事は 「Blazor Advent Calendar 2022」の 11 日目の記事となります。
昨日は @jsakamoto さんの「Blazor WebAssembly - どこからも参照されていないコードが削除されるようにして .dll のサイズを小さくする」でした。

私は jsakamoto さんのようなディープなところまで Blazor を使えていないのですが、検証用に簡単な SPA アプリケーションを作成するときは Blazor WebAssembly を選択することが多いです。
これまで普段 Blazor WebAssembly を AWS 環境でちゃちゃっとホスティングしたい際には Amazon CloudFront + Amazon S3 を使うのが楽だと思って使っていました。
ただ、Azure Static WebApps のパスワード保護機能のような手軽に Basic 認証設定したいというときは CloudFront だとちょっと面倒でした。

どうやら AWS Amplify Hosting のほうが楽そうだぞということで試してみたところ、本当に簡単だったので紹介したいと思います。

デプロイ用のアプリケーションをローカルで作成する

テンプレートから新しいプロジェクトを作成しておきます。
特に今回は Blazor 上のコード修正は不要なので dotnet new しただけのもので良いです。

% dotnet new blazorwasm
The template "Blazor WebAssembly App" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/7.0-third-party-notices for details.

Processing post-creation actions...
Restoring /Users/iwasa.takahito/work/hoge1210blazor/hoge1210blazor.csproj:
  Determining projects to restore...
  Restored /Users/iwasa.takahito/work/hoge1210blazor/hoge1210blazor.csproj (in 11.09 sec).
Restore succeeded.


% dotnet run
Building...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5054
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/iwasa.takahito/work/hoge1210blazor

ローカル実行します。いつものデフォルトアプリケーションが実行されますね。

リリースモジュールを作成する

Amplify Hosting にモジュールをアップロードする方法ですが、いくつか存在していて Git リポジトリを連携する方法があります。
おそらくこちらが一般的で、かつ素早く修正版を更新出来るので便利だと思います。
が、今回は手動でモジュールをアップロードする方法を取ってみました。

% dotnet publish -c Release
MSBuild version 17.4.0+18d5aef85 for .NET
  Determining projects to restore...
  All projects are up-to-date for restore.
  hoge1210blazor -> /Users/iwasa.takahito/work/hoge1210blazor/bin/Release/net7.0/hoge1210blazor.dll
  hoge1210blazor (Blazor output) -> /Users/iwasa.takahito/work/hoge1210blazor/bin/Release/net7.0/wwwroot
  Optimizing assemblies for size may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
  Optimizing assemblies for size. This process might take a while.
  Compressing Blazor WebAssembly publish artifacts. This may take a while...
  hoge1210blazor -> /Users/iwasa.takahito/work/hoge1210blazor/bin/Release/net7.0/publish/

dotnet publish後に Zip 圧縮しています。

% cd  /Users/iwasa.takahito/work/hoge1210blazor/bin/Release/net7.0/publish/            
% ls
web.config      wwwroot
% zip -r hoge.zip ./                                                                   
  adding: wwwroot/ (stored 0%)
  adding: wwwroot/index.html (deflated 55%)
  adding: wwwroot/css/ (stored 0%)

:

  adding: wwwroot/sample-data/weather.json (deflated 70%)
  adding: web.config (deflated 71%)

AWS Amplify でホスティング

では Amplify でアプリケーションを作成していきます。
マネジメントコンソールから AWS Amplify にアクセスし All apps から Host web app を新規作成します。

Fron your existing code は先程言及したとおり Git 連携を使う方法が一般的ですが今回は Git 連携なしで直接アップロードします。
Git 連携したい場合はいずれかの Git プロバイダーに先程のコードをプッシュしておき、連携リポジトリとして指定します。

手動アップロードを行います。
先程 Zip 圧縮したファイルをアップロードします。

アップロード後に保存＆デプロイを行うとデプロイが始まります。
完了後に URL が表示されるのでアクセスしてみましょう。

これだけ！簡単に表示されましたね。

なお、publish の wwwroot を Zip 化してアップロードする必要があるのですが、最初 publish 自体を圧縮してアップロードしてしまい以下のようなエラー画面になりました。
同じエラー画面が表示された場合は一度 Zip ファイルの中身を確認してみてください。

Amplify Hosting の利点を使える

これだけで HTTPS 化された環境でホスティング出来ます。
かなり簡単ですね。

そしてもちろん Amplify Hosting のマネージドな機能も利用可能です。
そのあたりも少し見てみましょう。

アクセスコントロール

アクセスコントロールでは対象アプリケーションにユーザー名・パスワードによる制限を設定することが出来ます。

再デプロイや構成ファイルの設定など不要で、マネジメントコンソールから設定やパスワードの変更が簡単に行うことが出来ます。
簡易的に非公開な状態を作りたいケースが多いので、かなり便利です。

カスタムドメイン

私は普段は検証用に使うことが多いのでカスタムドメインまで設定するケースは少ないのですが、カスタムドメインも設定可能です。

今回初めて使ってみたのですが Route 53 のホストゾーンだと SSL 証明書の作成からカスタムドメインの関連付けまで全て自動で行ってくれるのでこれも CloudFront + S3 と比較するとかなり楽ですね。ワンクリックで完了してしまいました。

モニタリング

モニタリングでは各メトリクスやアラーム、アクセスログが確認可能です。
これも特にアプリケーションとの統合は不要ですぐに使えます。

CloudFront + S3 だとアクセスログの有効化や出力先の設定が必要だと思いますが、Amplify Hosting だとするに利用出来る状態になっています。

さいごに

本日は ASP.NET Core Blazor WebAssembly を AWS Amplify Hosting を使ってホスティングする方法を紹介しました。

これまで CloudFront + S3 以外の選択肢を検討していなかった方は Amplify Hosting を是非使ってみてください。
AWS Toolkit for Visual Studio との関係もあるかもしれませんが、冒頭お伝えした Git 連携なども考えると Amplify の利点かなり大きいと思いました。